<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>localstorage sample</title>
<script type="text/javascript" src="my_twitter.js"></script>
<script type="text/javascript" src="my_classifier.js"></script>

<style type="text/css">
	#header {
		background: blue;
		background-image: -webkit-gradient(linear, left top, left bottom,/*上から下にグラデーション*/
                                   color-stop(0, rgba(255, 255, 255, .2)), /*透明度 80%*/
                                   color-stop(50%, rgba(255, 255, 255, .3)),/*透明度70%*/
                                   color-stop(90%, rgba(255, 255, 255, .4)));/*透明度60%*/
	}
	}
	h1{
		margin: 0px;
		padding: 0px;
		color: white;
		text-shadow: 2px 2px 1px #666666;
	}
	
	h2 {
		margin: 0px;
		padding: 0px;
		color: white;
		text-shadow: 2px 2px 1px #666666;
	}
	
	body {
		background: #cccccc;
		margin: 0px;
	}
	
	#surface{
		width:320px;
		margin-left: auto;
		margin-right: auto;
		background: #333333;
	}
	
	
	.left {
		float: left;
	}
	
	
	#qform {
		padding: 2px 8px;
	}
	
	#message {
		padding: 4px 4px;
	}
	
	.sec {
		-webkit-border-radius: 10px;
		border: 1px black solid;
		background: white;
	}
	.profile_img {
		-webkit-border-radius: 5px;
		margin-top: 4px;
		margin-left: 4px;
		width: 72px;
		height: 72px;
		overflow: hidden;
	}
	.tweet {
		width: 228px;
		font-size: 9pt;
	}
	
	.text {
//		height: 72px;
		padding: 5px;
		margin: 2px 0px 2px 2px;
		-webkit-border-radius: 3px;
		font-weight: bold;
		overflow: hidden;
	}
	
	.username {
		height: 32px;
		font-style: italic;
		overflow: hidden;
	}
	
	.clear {
		clear: both;
	}
</style>

</head>
<body>
<div id="surface">
<div id="header">
	<h1>Twitter search</h1>
	<h2>with machine learning.</h2>
</div>
<div id="qform">
	<input type="text" size="32" id="query">&nbsp;
	<input type="button" name="search" id="search" value="search">
</div>
<div id="message"></div>
</div>

<!-- BEGIN::controller -->
<script type="text/javascript">
var tc = new MyClassifier();


var showResult = function(json) {
	var results = json.results;
	var len = results.length;
	var out = '';
	if(len == 0 ) {
		out = 'nothing...';
	} else {
		for(var i = 0; i < len; i++) {
			var text = results[i].text;
			var user_name = results[i].from_user;
			var profile_image_url = results[i].profile_image_url;
			var id = "tweet"+i;
			
			out += "<section>\n";
			out += "<div class='sec'>\n";
			out += "<div class='left'>";
			out += "  <div class='profile_img'><img src='"+profile_image_url+"' width='64'></div>\n";
			out += "</div>";
			
			out += "<div class='left tweet'>";
			out += "<div class='text' id='"+id+"'>"+text+"</div>";
//			out += "<div class='username'>-- "+user_name;
			out += "<div class='username'>";
			out += "  <span id='btn_"+id+"'><input type='button' class='like' ta='"+id+"' value='like'>";
			out += "  <input type='button' class='dislike' ta='"+id+"' value='dislike'></span>";
			out += "</div>";
			out += "</div>";
			out += "<div class='clear'></div>\n";
			out += "</div>\n";
			out += "</section>\n";
		}
	}
	document.getElementById('message').innerHTML = out;
	
	var texts = document.getElementsByClassName('text');
	for(var i = 0; i < texts.length; i++) {
		var node = texts[i];
		var text = node.innerHTML;
		tc.classify(text, node.id, function(id, score) {
			var obj = document.getElementById(id);
			obj.innerHTML += score;
			if (Math.abs(score) > 10) {
				if (score > 0) {
					obj.style.background = 'pink';
				}
				else {
					obj.style.fontSize = '8pt';
					obj.style.fontWeight = 'normal';
					obj.style.background = 'gray';
				}
			}
		});
		
	}
	
	var likes = document.getElementsByClassName('like');
	var dislikes = document.getElementsByClassName('dislike');

	for(var i = 0; i < likes.length; i++) {
		likes[i].addEventListener('click', function(e) {
			var id = e.target.getAttribute('ta');
			var text = document.getElementById(id).innerHTML;
			tc.like(text);
			document.getElementById(id).style.color='orange';
			
			document.getElementById('btn_'+id).style.display = 'none';
		}, false);
	}

	for(var i = 0; i < dislikes.length; i++) {
		dislikes[i].addEventListener('click', function(e) {
			var id = e.target.getAttribute('ta');
			var text = document.getElementById(id).innerHTML;
			tc.dislike(text);
			document.getElementById(id).style.color='cyan';
			document.getElementById(id).style.fontWeight='bold';

			document.getElementById('btn_'+id).style.display = 'none';
		}, false);
	}
}

var getTweet = function() {
	var query = document.getElementById('query').value;
	localStorage.query = query;
	var mt = new MyTwitter();
	mt.set('http://search.twitter.com/search.json?q='+encodeURIComponent(query)+'&callback=showResult', 'showRT');
	mt.get();
}

window.addEventListener('load', function(e) {
	localStorage.query = localStorage.query || 'twitter';
	document.getElementById('query').value = localStorage.query;
	
	getTweet();
}, false);

document.getElementById('search').addEventListener('click', function(e){
	getTweet();
}, false);

/*
############################
## bayse classifier
############################
ref) http://getpopfile.org/docs/jp:glossary:bayesian

最終的に、P(Bi|E) はそれぞれのバケツについて

            P(Bi|E) = P(E1|Bi) x P(E2|Bi) x ... x P(Eo|Bi) x P(Bi)
として計算され、そのうちから最大のものを選ぶことになります。

############################
## twitter api.
############################

public timeline:(jsonp suppported)
http://twitter.com/statuses/public_timeline.json&callback=test

*/

</script>

<!-- FINISH::controller -->

</body>
</html>
